參考原文網址：AHEAD-OF-TIME COMPILATION

參考簡體中文網址：预 (AOT) 编译器

前面的學習筆記中，我們都是使用ng serve

這個指令來執行我們用Angular Cli建置的專案

ng serve 跟 ng build 使用的是 Just-In-Time (JIT)－即時編譯－的方式

所以專案運行在瀏覽器時，程式碼是即時被編譯，然後再執行。

JIT會造成執行期間的性能損耗，因為是先compile後才會把View Render出來。有時候我們的專案會引用很多函式庫，但實際運行上並不需要，這些函式庫，無論是否實際上真正被使用，都會被加入在編譯後的程式碼中，造成原始碼檔案越來越大。當專案的結構更大時，會需要更長的時間進行傳輸及載入。

Ahead-of-Time (AoT) 預先編譯 vs Just-in-Time(JiT) 即時編譯

為什麼需要使用AOT的方式編譯

• 渲染得更快

  因為程式碼是先Compiler過的，所以不需要等待編譯，瀏覧器是直接載入程式碼，所以可以立即渲染產生結果

• 需要的非同步請求更少

  編譯器把外部html模板和CSS樣式表都使用inline的方式放到bundle的JavaScript中，消除了原本對這些文件的Ajax請求

• 需要下載的Angular Framework檔案尺寸更小

  因為專案已經預編譯過了，就不需要再下載Angular Compiler，而Angular Compiler差不多是佔了Angular Framework體積的一半，所以省略它就可以減少專案的檔案尺寸

• 提早檢查出Template的錯誤

  直接在預先編譯的過程中檢查Template的錯誤，而不是在執行時期才發現

• 更安全

  由於HTML及CSS都使用inline的方式放進JavaScript中，沒有Template可以閱讀，所以注入攻擊的機會較少

認識Tree Shaking

AOT的優化使用了一種機制叫做Tree Shaking，它會從上到下遍歷整個樹，搖掉用不到的程式碼，這些程式碼就像是聖誕樹中死掉的松針一樣。

透過移除程式碼中用不到的部分，就可以大幅縮減專案檔案下載的尺寸。

想多了解Tree Shaking的步驟可以參考官網，有很詳細的說明。

Tree Shaking機制，仰賴的是ES2015的Import及Export，

所以在官網的tsconfig.aot.json設定中，必須要把module設成"es2015"

使用AOT編譯要注意Component-relative path

AOT要求@Component的templateUrl及styleUrl的路徑是相對於Componet程式碼本身的。也就是說tour-list.component.html及tour-list.component.css的路徑要在tour-list.component.ts的同一層。

而JIT的檔案配置比較彈性，不需要放置在同一層，

但我們為了與AOT編譯兼容，最好堅持使用Component-relative path

開發時期使用JIT，產品上線時使用AOT

AOT是執行速度快，但相對的他Compiler及做Tree Shaking優化的時間就比較長，我們在開發時期可以只要用JIT來方便我們檢視程式的結果是否符合，免得在Compiler花太多時間。但是產品上線時期為了讓專案能更快速載入，增加使用者體驗，我們就要使用AOT。

Angular Cli如何使用 AOT

只要在指令列加上 --aot及可

ng build --aot
ng server --aot

之前的專案，我是使用Angular-cli beta 17及Angular2.0版，

但會一直發生webpack_1.AotPlugin is not a constructor 的錯誤訊息

查詢了官方GitHub Issue，有人回報使它使用Angular-cli beta 24及Angular 2.4版，就可以正常運作了。

於是我重新安裝了Angular-cli npm install angular-cli@lastest

然後用 ng new your-project-name --style=scss

重新建立了一個專案 lala-travel-web 再把程式碼搬過來

現在來觀察使用JIT及AOT時，檔案下載與載入的結果。

JIT ng serve

AOT ng serve --aot

足足快了一倍以上。

提供今天的Github專案進度檔案